﻿@{
    ViewBag.Title = "Home Page";
    ViewBag.CurrentPage = "homepage";
}

<!-- Slider Bootstrap -->
<div id="home_carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#home_carousel" data-slide-to="0" class=""></li>
        <li data-target="#home_carousel" data-slide-to="1" class=""></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active left">
            <img src="~/images/2.png" alt="">
            <div class="carousel-caption">
                <h2>Lorem ipsum delor sit amet</h2>
                <p>
                    Claritas est etiam processus dynamicus, qui sequitur
                    mutationem consuetudium lectorum. Mirum est notare quam littera gothica,
                    quam nunc putamus parum claram, anteposuerit litterarum.
                </p>
                <form method="get" action="index.html">
                    <button type="submit" class="btn btn-lg btn-default">Learn more</button>
                </form>
            </div>
        </div>
        <div class="item next left">
            <img src="~/images/3.png" alt="">
            <div class="carousel-caption">
                <h2>Lorem ipsum delor sit amet</h2>
                <p>
                    Claritas est etiam processus dynamicus, qui sequitur
                    mutationem consuetudium lectorum. Mirum est notare quam littera gothica,
                    quam nunc putamus parum claram, anteposuerit litterarum.
                </p>
                <form method="get" action="index.html">
                    <button type="submit" class="btn btn-lg btn-default">Learn more</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#home_carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#home_carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<!-- Slider Bootstrap end -->
<!-- Services -->
<div class="container">
    <div class="row">
        <div class="col-md-4 col3">
            <a href="services-single.html" title="Dog boarding kennels" class="roundal" id="kennel"></a>
            <h3>Dog boarding kennels</h3>
            <p>
                Eodem modo typi, qui nunc nobis videntur parum clari, fiant
                sollemnes in futurum. Humanitatis per seacula quarta decima et quinta
                decima.
            </p>
            <form method="get" action="services-single.html">
                <button type="submit" class="btn btn-default btn-green">Learn more</button>
            </form>
        </div>
        <div class="col-md-4 col3">
            <a href="services-single.html" title="Doggy grooming" class="roundal" id="grooming"></a>
            <h3>Doggy grooming</h3>
            <p>
                Eodem modo typi, qui nunc nobis videntur parum clari, fiant
                sollemnes in futurum. Humanitatis per seacula quarta decima et quinta
                decima.
            </p>
            <form method="get" action="services-single.html">
                <button type="submit" class="btn btn-default btn-green">Learn more</button>
            </form>
        </div>
        <div class="col-md-4 col3">
            <a href="services-single.html" title="Adoption centre" class="roundal" id="adoption"></a>
            <h3>Adoption centre</h3>
            <p>
                Eodem modo typi, qui nunc nobis videntur parum clari, fiant
                sollemnes in futurum. Humanitatis per seacula quarta decima et quinta
                decima.
            </p>
            <form method="get" action="services-single.html">
                <button type="submit" class="btn btn-default btn-green">Learn more</button>
            </form>
        </div>
        <div class="col-md-4 col3">
            <a href="services-single.html" title="Dog walking" class="roundal" id="walking"></a>
            <h3>Dog walking</h3>
            <p>
                Eodem modo typi, qui nunc nobis videntur parum clari, fiant
                sollemnes in futurum. Humanitatis per seacula quarta decima et quinta
                decima.
            </p>
            <form method="get" action="services-single.html">
                <button type="submit" class="btn btn-default btn-green">Learn more</button>
            </form>
        </div>
        <div class="col-md-4 col3">
            <a href="services-single.html" title="Care advice" class="roundal" id="advice"></a>
            <h3>Care advice</h3>
            <p>
                Eodem modo typi, qui nunc nobis videntur parum clari, fiant
                sollemnes in futurum. Humanitatis per seacula quarta decima et quinta
                decima.
            </p>
            <form method="get" action="services-single.html">
                <button type="submit" class="btn btn-default btn-green">Learn more</button>
            </form>
        </div>
        <div class="col-md-4 col3">
            <a href="services-single.html" title="Puppy play" class="roundal" id="play"></a>
            <h3>Puppy play</h3>
            <p>
                Eodem modo typi, qui nunc nobis videntur parum clari, fiant
                sollemnes in futurum. Humanitatis per seacula quarta decima et quinta
                decima.
            </p>
            <form method="get" action="services-single.html">
                <button type="submit" class="btn btn-default btn-green">Learn more</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 centered">
            <h3><span>Our happy doggy customers</span></h3>
            <p>
                Claritas est etiam processus dynamicus, qui sequitur mutationem
                consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc
                putamus parum claram, anteposuerit litterarum formas humanitatis per
                seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis
                videntur parum clari, fiant sollemnes in futurum.
            </p>
        </div>
    </div>
</div>
<!-- Services end -->
<!-- Carousel -->
<div id="c-carousel">
    <div id="wrapper">
        <div class="caroufredsel_wrapper" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 1496px; height: 288px; margin: 0px; overflow: hidden;">
            <div id="carousel" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 5984px; height: 288px; z-index: auto;">
                <div>
                    <a href="~/images/dog-3.png" title="Dog" data-hover="Kyla the bull terrier" data-toggle="lightbox" class="lightbox">
                        <img src="~/images/dog-3.png" alt="Dog">
                    </a>
                </div>
                <div>
                    <a href="~/images/dog-1.png" title="Dog" data-hover="Marty the yorkshire terrier" data-toggle="lightbox" class="lightbox">
                        <img src="~/images/dog-1.png" alt="Dog">
                    </a>
                </div>
                <div>
                    <a href="~/images/dog-2.png" title="Dog" data-hover="Sandy the west highland terrier" data-toggle="lightbox" class="lightbox">
                        <img src="~/images/dog-2.png" alt="Dog">
                    </a>
                </div>
                <div>
                    <a href="~/images/dog-3.png" title="Dog" data-hover="Kyla the bull terrier" data-toggle="lightbox" class="lightbox">
                        <img src="~/images/dog-3.png" alt="Dog">
                    </a>
                </div>
                <div>
                    <a href="~/images/dog-1.png" title="Dog" data-hover="Sandy the west highland terrier" data-toggle="lightbox" class="lightbox">
                        <img src="~/images/dog-1.png" alt="Dog">
                    </a>
                </div>
                <div>
                    <a href="~/images/dog-2.png" title="Dog" data-hover="Marty the yorkshire terrier" data-toggle="lightbox" class="lightbox">
                        <img src="~/images/dog-2.png" alt="Dog">
                    </a>
                </div>
            </div>
        </div>
        <div id="pager" class="pager" style="display: block;">
            <a href="#" class=""><span>1</span></a><a href="#" class=""><span>2</span></a><a href="#" class=""><span>3</span></a><a href="#" class="selected"><span>4</span></a><a href="#" class=""><span>5</span></a><a href="#" class=""><span>6</span></a>
        </div>
    </div>
</div>
<!-- Carousel end -->
<!-- Rehome -->
<div class="rehome">
    <div class="container">
        <div class="row">
            <div class="col-md-12 centered">
                <p>
                    <a href="#" title="Dougie" class="roundal"></a>
                </p>
                <h4>Could you give <a href="adoption-single.html" title="Could you give Dougie a new home?">Dougie</a> a new home?</h4>
                <p>
                    Claritas est etiam processus dynamicus, qui sequitur mutationem
                    consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc
                    putamus parum claram, anteposuerit litterarum formas humanitatis per
                    seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis
                    videntur parum clari, fiant sollemnes in futurum.
                </p>
                <form method="get" action="adoption-single.html">
                    <button type="submit" class="btn btn-default btn-green">Learn more</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Rehome end -->
<!-- Testimonials -->
<div class="testimonials" data-stellar-background-ratio="0.6" style="background-position: 0px 1349.01px;">
    <div class="container">
        <div class="row">
            <div class="col-md-12 centered">
                <!-- Slider -->
                <div id="home_testimonial" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#home_testimonial" data-slide-to="0" class=""></li>
                        <li data-target="#home_testimonial" data-slide-to="1" class=""></li>
                        <li data-target="#home_testimonial" data-slide-to="2" class=""></li>
                        <li data-target="#home_testimonial" data-slide-to="3" class=""></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item">
                            <p>
                                "Claritas est etiam processus dynamicus, qui sequitur
                                mutationem consuetudium lectorum. Mirum est notare quam littera gothica,
                                quam nunc putamus parum claram, anteposuerit litterarum."
                            </p>
                        </div>
                        <div class="item active left">
                            <p>
                                "Duis autem vel eum iriure dolor in hendrerit in vulputate
                                velit esse molestie consequat, vel illum dolore eu feugiat nulla
                                facilisis at vero eros et accumsan et iusto odio dignissim qui."
                            </p>
                        </div>
                        <div class="item next left">
                            <p>
                                "Claritas est etiam processus dynamicus, qui sequitur
                                mutationem consuetudium lectorum. Mirum est notare quam littera gothica,
                                quam nunc putamus parum claram, anteposuerit litterarum."
                            </p>
                        </div>
                        <div class="item">
                            <p>
                                "Duis autem vel eum iriure dolor in hendrerit in vulputate
                                velit esse molestie consequat, vel illum dolore eu feugiat nulla
                                facilisis at vero eros et accumsan et iusto odio dignissim qui."
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Slider end -->

            </div>
        </div>
    </div>
</div>
<!-- Testimonials end -->
<!-- Adoption -->
<div class="container">
    <div class="row">
        <div class="col-md-12 centered">
            <h3><span>Find your perfect companion</span></h3>
            <p>
                Claritas est etiam processus dynamicus, qui sequitur mutationem
                consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc
                putamus parum claram, anteposuerit litterarum formas humanitatis per
                seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis
                videntur parum clari, fiant sollemnes in futurum.
            </p>
        </div>
    </div>
    <div class="row adoption">
        <div class="col-md-4">
            <a href="adoption-single.html" title=""><img src="~/images/dog-4.png" alt="Saint Bernard"></a>
            <div class="title">
                <h5>
                    <span data-hover="Saint Bernard">Saint Bernard</span>
                </h5>
            </div>
        </div>
        <div class="col-md-4">
            <a href="adoption-single.html" title="Beagle"><img src="~/images/dog-5.png" alt="Beagle"></a>
            <div class="title">
                <h5>
                    <span data-hover="Beagle">Beagle</span>
                </h5>
            </div>
        </div>
        <div class="col-md-4">
            <a href="adoption-single.html" title="Staffordshire Bull Terrier"><img src="~/images/dog-6.png" alt="Staffordshire Bull Terrier"></a>
            <div class="title">
                <h5>
                    <span data-hover="Staffordshire Bull Terrier">Staffordshire Bull Terrier</span>
                </h5>
            </div>
        </div>
        <div class="col-md-4">
            <a href="adoption-single.html" title="King Charles Cavalier"><img src="~/images/dog-7.png" alt="King Charles Cavalier"></a>
            <div class="title">
                <h5>
                    <span data-hover="King Charles Cavalier">King Charles Cavalier</span>
                </h5>
            </div>
        </div>
        <div class="col-md-4">
            <a href="adoption-single.html" title="Dachshund"><img src="~/images/dog-8.png" alt="Dachshund"></a>
            <div class="title">
                <h5>
                    <span data-hover="Dachshund">Dachshund</span>
                </h5>
            </div>
        </div>
        <div class="col-md-4">
            <a href="adoption-single.html" title="French Bulldog"><img src="~/images/dog-9.png" alt="French Bulldog"></a>
            <div class="title">
                <h5>
                    <span data-hover="French Bulldog">French Bulldog</span>
                </h5>
            </div>
        </div>
    </div>
</div>
<!-- Adoption end -->

@section Scripts{
    <script>
        $(document).ready(function () {
            $('ul.nav.navbar-nav li a[title~="Home"]').parent().addClass("active");
            $('.navbar').addClass('inner-pages');
        });
    </script>
}